<!-- components/TaskCard.vue -->
<script setup>
import { useTaskStore } from '@/stores/taskStore'

const props = defineProps(['task'])
const store = useTaskStore()

const assignToMe = () => {
  store.autoAssignTask(props.task.id)
}
</script>

<template>
  <div class="task-card">
    <h4>{{ task.title }}</h4>
    <p>{{ task.description }}</p>
    <div class="task-meta">
      <span>优先级: {{ task.priority }}</span>
      <button v-if="!task.assignedTo" @click="assignToMe">
        分配给我
      </button>
      <span v-else>
        分配给: {{ store.members.find(m => m.id === task.assignedTo)?.name }}
      </span>
    </div>
  </div>
</template>

<style scoped>
.task-card {
  background: white;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.task-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.8em;
  color: #666;
}
</style>